@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

/* Ant Design 深色主题覆盖样式 */
.login-input {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.login-input:hover,
.login-input:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2) !important;
}

.login-input input {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.login-input input::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* 消息提示样式 */
.custom-message {
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(8px);
}

/* Ant Design 表单验证消息样式 */
.ant-form-item-explain-error {
  color: #ff4d4f !important;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* 场景弹框深色主题样式优化 */
.scene-modal .ant-modal-content {
  background: rgba(20, 20, 20, 0.95) !important;
}

.scene-modal .ant-modal-header {
  background: rgba(255, 255, 255, 0.03) !important;
}

.scene-modal .ant-modal-title {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 500 !important;
}

.scene-modal .ant-modal-close {
  color: rgba(255, 255, 255, 0.6) !important;
}

.scene-modal .ant-modal-close:hover {
  color: rgba(255, 255, 255, 0.9) !important;
}

.scene-modal .ant-modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: transparent !important;
}

/* 输入框和选择框样式优化 */
.scene-input,
.scene-select .ant-select-selector,
select.scene-select {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* 占位符文本颜色 */
.scene-input::placeholder,
.scene-select .ant-select-selection-placeholder,
select.scene-select option {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* 下拉选项样式 */
select.scene-select option {
  background-color: rgba(30, 30, 30, 0.95) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* 标签文本颜色 */
.scene-form-label {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* 条件和动作表单容器 */
.scene-condition-form,
.scene-action-form {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}

/* 条件和动作项样式 */
.scene-condition-item,
.scene-action-item {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  margin-bottom: 8px !important;
}

/* 输入框和选择框悬停状态 */
.scene-input:hover,
.scene-select .ant-select-selector:hover,
select.scene-select:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* 输入框和选择框焦点状态 */
.scene-input:focus,
.scene-select .ant-select-selector:focus,
select.scene-select:focus {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2) !important;
}

/* 按钮样式 */
.scene-btn {
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  transition: all 0.2s !important;
}

.scene-btn-primary {
  background: var(--primary-color) !important;
  color: white !important;
}

.scene-btn-primary:hover {
  background: var(--primary-color-hover) !important;
}

.scene-btn-secondary {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.scene-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* 时间选择器样式 */
input[type="time"].scene-input {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* 数字输入框样式 */
input[type="number"].scene-input {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* 范围滑块样式 */
input[type="range"].scene-input {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* 颜色选择器样式 */
input[type="color"].scene-input {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  height: 40px !important;
}
